<template>
<!-- 薪资计算页 -->
  <div>
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <el-row style="padding-top:25px;padding-left:20px;">
                    <el-button type="primary" @click="AddSalaryCalculate">新建薪资方案</el-button>
                    <div style="display: inline;position: relative;left:900px"> 
                        <el-input
                            style="width:200px;"
                            placeholder="请输入关键字"
                            prefix-icon="el-icon-search"
                            v-model="input">
                        </el-input>
                    </div>
                </el-row>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark-two" style="padding-top:20px;padding-left:20px;">
                 <el-table
                    :data="tableData"
                    border="true"
                    style="width:99%;">
                    <el-table-column prop="name" label="方案名称" width="190"></el-table-column>
                    <el-table-column prop="date" label="薪资周期" width="190"> </el-table-column>
                    <el-table-column prop="name" label="税期" width="140"> </el-table-column>
                    <el-table-column prop="name" label="人数" width="140"> </el-table-column>
                    <el-table-column prop="name" label="创建人" width="140"> </el-table-column>
                    <el-table-column prop="name" label="状态" width="150"> </el-table-column>
                    <el-table-column prop="name" label="创建时间" width="190"> </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                        <template slot-scope="scope">
                            <el-button
                            @click.native.prevent="handleEdit(scope.$index, scope.row)"
                            type="text" >
                            设置
                            </el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-dropdown>
                                <el-button type="text" icon="el-icon-more" size="small"></el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>生成台账</el-dropdown-item>
                                    <el-dropdown-item>修改</el-dropdown-item>
                                    <el-dropdown-item>撤销</el-dropdown-item>
                                    <el-dropdown-item>停用</el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  >
                  </el-pagination>
                </div>
            </div>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
   data(){
       return{
           input:"",
            tableData: [{
            date: '2016-05-02',
            name: '王小虎'
            }, {
            date: '2016-05-04',
            name: '王小虎'
            }, {
            date: '2016-05-01',
            name: '王小虎'
            }, {
            date: '2016-05-03',
            name: '王小虎'
            }],
            pageNum: 1,
            pageSize: 5,
            total: 0,
       }
   },
    created(){
      this.getSalaryCalculate();
    },
    methods: {
        //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        this.pageSize = val;
        this.getSalaryCalculate();
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        this.pageNum = val;
        this.getSalaryCalculate();
      },
      //查询方法 分页 调查，
      getSalaryCalculate(){
        
      },
      AddSalaryCalculate(){
         this.$router.push("/AddSalaryCalculate"); //添加
      }
    }
}
</script>

<style scoped>
.block{
  padding-left: 800px;
}
 .el-row {
    margin-bottom: 20px;
    
                 
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: white;
    height: 90px;
  }
  .bg-purple-dark-two {
    background: white;
    height: 600px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>